<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="UTF-8" />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
    <title>Login and Registration Form with HTML5 and CSS3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
    <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
    <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="__PUBLIC__/favicon.ico">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/animate-custom.css" />
    <link rel="stylesheet" type="text/javascript" href="__PUBLIC__/js/jquery-1.11.0.min.js" />
</head>
<body>
<div class="container">
    <!-- Codrops top bar -->
    <div class="codrops-top">
        <a href="">
            <strong>&laquo; Previous Demo: </strong>Responsive Content Navigator
        </a>
                <span class="right">
                    <a href=" http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
        <div class="clr"></div>
    </div><!--/ Codrops top bar -->
    <header>
        <h1>tp5<span>登录与注册</span></h1>
        <nav class="codrops-demos">
            <span>点击 <strong>"注册"</strong> </span>
            <a href="index.html" class="current-demo">Demo 1</a>
            <a href="index2.html">Demo 2</a>
            <a href="index3.html">Demo 3</a>
        </nav>
    </header>
    <section>
        <div id="container_demo" >
            <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
            <a class="hiddenanchor" id="toregister"></a>
            <a class="hiddenanchor" id="tologin"></a>
            <div id="wrapper">
                <div id="login" class="animate form">
                    <form  action="{:url('login')}" autocomplete="on" method="post">
                        <h1>登录</h1>
                        <p>
                            <label for="username" class="uname" data-icon="u" > 邮箱或用户名 </label>
                            <input id="username" name="username" required="required" type="text" placeholder="请填写有邮箱或用户名"/>
                        </p>
                        <p>
                            <label for="password" class="youpasswd" data-icon="p"> 密码 </label>
                            <input id="password" name="password" required="required" type="password" placeholder="请填写登录密码" />
                        </p>
                        <p>
                            <label for="captcha" class="captcha" data-icon="u" > 验证码</label>
                            <input id="captcha" name="captcha" required="required" type="text" placeholder="请填写验证码"/>
                            <img src="{:captcha_src()}" class="verify" onclick="javascript:this.src='{:captcha_src()}?rand='+Math.random()" >
                        </p>
                        <p class="keeplogin">
                            <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                            <label for="loginkeeping">自动登录</label>
                        </p>
                        <p class="login button">
                            <input type="submit" value="登录" />
                        </p>
                        <p class="change_link">
                            Not a member yet ?
                            <a href="#toregister" class="to_register">注册</a>
                        </p>
                    </form>
                </div>

                <div id="register" class="animate form">
                    <form  action="{:url('Login/register')}" method="post" autocomplete="on">
                        <h1> 注册 </h1>
                        <p>
                            <label for="usernamesignup" class="uname" data-icon="u">用户名</label>
                            <input id="usernamesignup" name="username" required="required" type="text" placeholder="请填写你的用户名" />
                        </p>
                        <p>
                            <label for="emailsignup" class="youmail" data-icon="e" > 邮箱</label>
                            <input id="emailsignup" name="email" required="required" type="email" placeholder="请填写你的邮箱"/>
                        </p>
                        <p>
                            <label for="passwordsignup" class="youpasswd" data-icon="p">密码 </label>
                            <input id="passwordsignup" name="password" required="required" type="password" placeholder="请填写你的密码"/>
                        </p>
                        <p>
                            <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">重复密码</label>
                            <input id="passwordsignup_confirm" name="passwords" required="required" type="password" placeholder="请再次输入你的密码"/>
                        </p>
                        <p class="signin button">
                            <input type="submit" id="list" value="注册"/>
                        </p>

                        <p class="change_link">
                            Already a member ?
                            <a href="#tologin" class="to_register"> 登录 </a>
                        </p>
                    </form>
                </div>

            </div>
        </div>
    </section>
</div>
</body>
</html>